<!-- 新文件名 -->
<template>
  <div class="new-file-name-form">
    <el-form :model="newFileNameForm">
      <el-form-item label="新文件名" label-position="top">
        <el-tooltip effect="dark" placement="top" :visible="tooltipVisable">
          <template #content>
            文件名不能包含以下任意字<br />符：\ / | " * : ? &lt; >
          </template>
          <el-input
            v-model="newFileNameForm.newFileName"
            :rows="3"
            type="textarea"
            placeholder="请输入新文件名"
            @input="handleValueInput"
          />
        </el-tooltip>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import useFileRenamePropsStore from '@renderer/store/CpnProps/FileRenamePropsStore'
import useNewFileNameFormStore from '@renderer/store/Form/NewFileNameFormStore'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

// 提示框的可见性
const tooltipVisable = ref(false)

const { newFileNameForm } = storeToRefs(useFileRenamePropsStore())
const formStore = useNewFileNameFormStore()

// 字符校验正则
const reg = /[\\/|"*:?<>]+/g

let timer: number | undefined

function handleValueInput(value: string) {
  if (value.search(reg) !== -1) {
    tooltipVisable.value = true

    if (timer) {
      window.clearInterval(timer)
      timer = undefined
    }

    // 2秒后自动关闭
    timer = window.setTimeout(() => {
      tooltipVisable.value = false
      timer = undefined
    }, 2000)

    // 去除不合法字符
    newFileNameForm.value.newFileName = value.replaceAll(reg, '')
  } else {
    Object.assign(formStore, newFileNameForm.value)
  }
}
</script>

<style lang="less" scoped></style>
